<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>

  <body>
    
    <div ng-include="headerInclude"></div>
    <div id="form-page" class="container-pf-nav-pf-vertical container-fluid apiman-entity-new page" ng-controller="Apiman.OrgNewMemberController as onmCtrl" ng-cloak="" ng-show="pageState == 'loaded'">
      <div class="row">
        <h2 class="title" apiman-i18n-key="new-member">New Member</h2>
      </div>
      <!-- Helpful hint -->
      <div class="row">
        <p apiman-i18n-key="new-member-help-text" class="col-md-6 apiman-label-faded">Add a member to this organization by searching for a User below.  Once the User is located, simply select their roles and click <strong>Add Member</strong>.</p>
      </div>
      <!-- HR -->
      <div class="row hr-row">
        <hr/>
      </div>
      <!-- User search bar -->
      <div class="row">
        <dl>
          <dt apiman-i18n-key="find-user">Find a User</dt>
          <dd>
            <div class="" style="line-height: normal">
              <form ng-submit="findUsers(searchText)">
                <input ng-model="searchText" type="text" class="apiman-form-control form-control input-search" apiman-i18n-key="new-member.search-by-user" placeholder="Search by user name...">
                <button type="submit" apiman-action-btn="" class="btn btn-default btn-search" data-field="searchButton" apiman-i18n-key="search" data-icon="fa-cog" placeholder="Searching">Search</button>
              </form>
            </div>
          </dd>
        </dl>
      </div>
      <!-- User search results -->
      <div class="row">
        <div class="panel panel-default input-search-results">
          <div class="panel-body container-fluid">
            <div ng-hide="searchBoxValue.length > 0" apiman-i18n-key="new-member.search-for-users">(Search for users above)</div>
            <div ng-show="searchBoxValue.length > 0 && queriedUsers.length == 0" apiman-i18n-key="new-member.no-users-found">(No users found)</div>
            <apiman-user-entry user="user" selected-users="selectedUsers" ng-repeat="user in queriedUsers"></apiman-user-entry>
          </div>
        </div>
      </div>
      <!-- Role selections -->
      <div class="row">
        <dl>
          <dt apiman-i18n-key="roles">Role(s)</dt>
          <dd>
            <div>
              <select apiman-i18n-key="new-member.select-roles" title="Select role(s)..." ng-options="role.id as role.name for role in roles"
                ng-model="selectedRoles" class="selectpicker" apiman-select-picker=""
                multiple>
              </select>
            </div>
          </dd>
        </dl>
      </div>
      <!-- HR -->
      <div class="row hr-row">
        <hr/>
      </div>
      <!-- Create Button -->
      <div class="row">
        <button class="btn btn-primary" apiman-i18n-key="add-members" data-icon="fa-cog" placeholder="Adding..."
                ng-click="addMembers()" data-field="addMembersButton" apiman-action-btn
                ng-disabled="selectedRoles.length === 0 || countObjectKeys(selectedUsers) === 0">
          Add Member(s)
        </button>
        <a href="javascript:window.history.back()" class="btn btn-default btn-cancel" apiman-i18n-key="cancel">Cancel</a>
      </div>
    </div> <!-- /container-pf-nav-pf-vertical container-fluid -->
  </body>
</html>
